<template>
  <div>
    <el-container>
      <!--    侧边栏  -->
      <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529">
        <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center">
          <img src="@/assets/icon.jpg" alt="" style="width: 40px; height: 40px">
          <span class="logo-title" v-show="!isCollapse" style="flex: 1;">法律案例平台</span>
        </div>

        <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001529"
          text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none"
          :default-active="$route.path">
          <el-menu-item index="/admin">
            <i class="el-icon-menu"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-menu-item index="/admin/file-management">
            <i class="el-icon-house"></i>
            <span slot="title" @click.native="fileuploader">文件上传</span>
          </el-menu-item>
          <el-menu-item index="/admin/annomanagement">
            <i class="el-icon-house"></i>
            <span slot="title">公告管理</span>
          </el-menu-item>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item>用户信息</el-menu-item>
            <el-menu-item @click.native="checkFile">管理员信息</el-menu-item>
            <el-menu-item @click.native="addNew">案例管理</el-menu-item>
          </el-submenu>
        </el-menu>

      </el-aside>

      <el-container>
        <!--头部区域-->
        <el-header>

          <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
            <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
            <i class="el-icon-quanping" style="font-size: 26px" @click="handleFull"></i>
            <el-dropdown placement="bottom">
              <div style="display: flex; align-items: center; cursor: default">
                <el-image  :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' " alt="用户头像" style="width: 40px; height: 40px;border-radius:50%;margin: 0 5px"></el-image>
                <!-- <img src="@/assets/logo1.png" alt="" style="width: 40px; height: 40px; margin: 0 5px"> -->
                <span>管理员{{ username }}</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="checkFile">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="changePwd">修改密码</el-dropdown-item>
                <!-- //退出登录,必须加上.native，否则点击无效 -->
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </el-header>

        <!--        主体区域-->
        <el-main>
          <div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
            <div>
              <p>当前时间: {{ formattedTime }}</p>
            </div>
          </div>
          <div style="display: flex;">
            <el-card style="width: 30%; margin-right=10px">
              <div slot="header" class="clearfix">
                <span>欢迎进入法律案例管理系统后台</span>
              </div>
              <div>
                test-test
                <div style="margin-top: 20px">
                  <div style="margin: 10px 0"><strong>主题色</strong></div>
                  <el-button type="primary">按钮</el-button>
                  <el-button type="success">按钮</el-button>
                  <el-button type="warning">按钮</el-button>
                  <el-button type="danger">按钮</el-button>
                  <el-button type="info">按钮</el-button>
                </div>
              </div>
            </el-card>
            <el-card style="width: 70%;">
              <div slot="header" class="clearfix">
                <span>系统中的用户信息</span>
              </div>
              <el-table :data="users" max-height="250">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="username" label="用户姓名" width="140"></el-table-column>
                <el-table-column prop="phone" label="联系电话" width="140"></el-table-column>
                <el-table-column prop="residence" label="出生地" width="140"></el-table-column>
                <el-table-column prop="address" label="所在地"></el-table-column>
                <el-table-column label="文件上传">
                  <template v-slot="scope">
                    <el-upload action="http://localhost:9090/file/upload" :headers="{ token: user.token }"
                      :show-file-list="false"
                      :on-success="(row, response, file, fileList) => handleTableFileUpload(scope.row, response, file, fileList)">
                      <el-button size="mini" type="primary">头像上传</el-button>

                    </el-upload>
                  </template>
                </el-table-column>
                <el-table-column label="头像预览">
                  <template v-slot="scope">
                    <el-image v-if="scope.row.avatar" :src="scope.row.avatar"
                      style="width: 50px; height: 50px"></el-image>
                      <div>
                        <el-button @click="preview(scope.row.avatar)">头像预览</el-button>
                      </div>
                  </template>
                </el-table-column>
              </el-table>

            </el-card>
          </div>
          <RouterView @update:user="updateUser"></RouterView>
        </el-main>

      </el-container>


    </el-container>
  </div>
</template>
  
<script>
import axios from 'axios'
import request from '@/utils/request'
import { RouterLink, RouterView } from 'vue-router'
import FileManagement from './FileManagement.vue'


export default {
  name: 'HomeView',
  components: {
    RouterLink,
    RouterView,
    FileManagement
  },
  data() {
    // <RouterView @update:user="updateUser"></RouterView>用来接收子组件UserFile传递过来的数据
    return {
      isCollapse: false,
      asideWidth: '200px',
      collapseIcon: 'el-icon-s-fold',
      users: [],
      currentTime: new Date(),
      username: '',
      avatar:'',
      user: JSON.parse(localStorage.getItem('honey-user') || "{}")
    };
  },
  mounted() {
    // axios.get("http://localhost:8080/user/selectAll").then(res=>{
    //   this.users = res.data.data//获取到的数据赋值给users
    //   console.log(res.data)
    // })
    const storedUser = localStorage.getItem("honey-user");
    if (storedUser) {
      const user = JSON.parse(storedUser);
      this.username = user.username; // 提取用户名并显示
      this.avatar = user.avatar; // 假设用户头像数据存储在 avatar 中
    }
    request.get("/user/show").then(res => {
      this.users = res.data; //获取到的数据赋值给users
      console.log(res.data);
    });
  },
  created() {
    setInterval(() => {
      this.currentTime = new Date();
    }, 1000);
  },
  methods: {
    addNew(){
      this.$router.push('/password');
    },
    changePwd() {
      this.$router.push('/password');
    },
    updateUser(user) {//接收子组件传递过来的数据
      this.user = JSON.parse(JSON.stringify(user));//让父级的user等于子组件传递过来的user，这样就可以实现数据的同步，同时让他们俩的地址不一样，这样就不会出现子组件修改数据，父组件也跟着修改的情况，保证在点击子页面保存后，父页面的数据才会更新
    },
    handleFull() {
      document.documentElement.requestFullscreen();
    },
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse ? '64px' : '200px';
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold';
    },
    updateTime() {
      this.currentTime = new Date();
    },
    checkFile() {
      this.$router.push('/userFile');
    },
    logout() {
      localStorage.removeItem("honey-user");//清除本地存储和vuex中的token
      this.$router.push('/');
    },
    fileuploader() {
      this.$router.push('/admin-home/file-management');
    },
    handleTableFileUpload(row, response, file, fileList) {
      console.log(response, file, fileList);
      // row.avatar = response.data
      this.$set(row, 'avatar', response.response.data)
      request.put('/user/update', row).then(res => {
        if (res.code === '200') {
          this.$message.success('上传成功')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    preview(url) {
      window.open(url)
    }

  },
  computed: {
    formattedTime() {
      const options = {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric',
      };
      return this.currentTime.toLocaleString('zh-CN', options);
    },
  },
  components: { RouterLink }
}
</script>
  
<style>
.el-menu--inline {
  background-color: #000c17 !important;
}

.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 49px !important;
}

.el-menu-item:hover,
.el-submenu__title:hover {
  color: #fff !important;
}

.el-submenu__title:hover i {
  color: #fff !important;
}

.el-menu-item:hover i {
  color: #fff !important;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 5px !important;
  width: calc(100% - 8px);
  margin-left: 4px;
}

.el-menu-item.is-active i,
.el-menu-item.is-active .el-tooltip {
  margin-left: -4px;
}

.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}

.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
}

.el-submenu .el-menu-item {
  min-width: 0 !important;
}

.el-menu--inline .el-menu-item.is-active {
  padding-left: 45px !important;
}

/*.el-submenu__icon-arrow {*/
/*  margin-top: -5px;*/
/*}*/

.el-aside {
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}

.logo-title {
  margin-left: 5px;
  font-size: 20px;
  transition: all .3s;
  /* 0.3s */
}

.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  display: flex;
  align-items: center;
}
</style>